import React, { Component } from 'react';
// 引入组件
import { CSSTransition, SwitchTransition } from 'react-transition-group'
// 引入样式
import './css2.css'
class Csstransition2 extends Component {
  constructor() {
    super();
    this.state = {
      state: true
    }
  }
  toggle() {
    this.setState({
      state: !this.state.state
    })
  }
  render() {
    return (
      <div className="main">
        <SwitchTransition mode="out-in">
          <CSSTransition
            key={this.state.state ? "Goodbye, world!" : "Hello, world!"}
            addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
            classNames='fade'
          >
            <div className="button-container">
              <button onClick={() => this.toggle()}>{this.state.state ? 'Goodbye' : 'Hello'}</button>
            </div>
          </CSSTransition>
        </SwitchTransition>
      </div>
    );
  }
}

export default Csstransition2;
